<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="shared/css_js::header">
	<title>门店评价</title>
	<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
</head>
<style>
	.star-vote{
		width:120px;
		height:20px;
		position:relative;
		overflow:hidden;
	}
	.star-vote>span{
		position:absolute;
		width:100px;
		height:20px;
		background-repeat:no-repeat;
		left:0;
		top:0;
	}
	.star-vote>.add-star{
		background-image:url("/img/star.png");
	}
	.star-vote>.del-star{
		background-image:url("/img/greystar.png");
		background-color:white;
	}
	.weui-navbar__item{
		padding: 7px 0;
	}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">门店评价</h1>
		<input type="hidden" id="chnid" th:value="${chnid}"/>
	</header>
	<div class="mui-content">
		<div class="weui-tab">
			<div class="weui-navbar">
				<div class="weui-navbar__item weui-bar__item--on" href="#tab1" id="top1">
					全部
				</div>
				<div class="weui-navbar__item" href="#tab2" id="top2">
					最新
				</div>
				<div class="weui-navbar__item" href="#tab3" id="top3">
					晒图评价
				</div>
			</div>
			<div class="weui-tab__bd" style="padding-top: 35px">
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<!--顶部的评分-->
					<div th:if="${#lists.size(com3)!=0}" class="weui-grids" style="padding: 0px" >
						<div th:each="com3:${com3}" class="weui-grid js_grid" style="padding: 5px;background-color: white">
							<p class="hhh" style="color: red;text-align: center;font-size: 16px" th:text="${#numbers.formatDecimal(com3.star, 0, 2)}"></p>
							<div class="star_con star-vote aaa" style="margin-left: 5px">
								<span class="add-star" style="background-size: 100px"></span>
								<span class="del-star bbb" style="background-size: 100px"></span>
							</div>
							<p style="color: red;text-align: center" th:text="${com3.itemname}"></p>
						</div>
					</div>
					<ul class="mui-table-view">
						<li th:each="com:${com}" class="mui-table-view-cell mui-media">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" style="max-width:30px;height: 30px "/>
								<div class="mui-media-body">
									<p class="mui-pull-right" th:text="${#dates.format(com.createtime,'yyyy-MM-dd')}"></p>
									<p th:text="${#strings.substring(com.custname,0,1)+'先生'}"></p>
									<!--<p style="color: red" th:text="'评分:'+${com.commstar}"></p>-->
									<p class="star_con star-vote">
										<span class="add-star" style="background-size: 75px"></span>
										<span class="del-star" style="background-size: 75px"></span>
										<span class="point" style="color: red;left:80px" th:text="${com.commstar}+'.00'"></span>
									</p>
									<p style="color: black;font-size: 16px" th:text="${com.commcontent}"></p>
									<p>
										<span class="mui-pull-right" style="font-size: 12px" th:text="${com.servitemname}"></span> <span style="font-size: 12px;color: black" th:text="${com.carfactname}+' '+${com.carlinename}"></span>
									</p>
								</div>
							</div>
							<div class="weui-flex">
								<div class="weui-flex__item" style="margin-left: 11%">
									<img th:each="pic:${pic}" th:if="${com.commid==pic.commid}" th:src="@{'/common/image?filename='+${pic.picurl}}" style="height: 50px;width: 50px;margin-right: 17px"/>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div id="tab2" class="weui-tab__bd-item">
					<div th:if="${#lists.size(com3)!=0}" class="weui-grids" style="padding: 0px" >
						<div th:each="com3:${com3}" class="weui-grid js_grid" style="border-bottom:none;padding: 5px;background-color: white">
							<p class="hhh" style="color: red;text-align: center;font-size: 16px" th:text="${#numbers.formatDecimal(com3.star, 0, 2)}"></p>
							<div class="star_con star-vote aaa" style="margin-left: 5px">
								<span class="add-star" style="background-size: 100px"></span>
								<span class="del-star bbb" style="background-size: 100px"></span>
							</div>
							<p style="color: red;text-align: center" th:text="${com3.itemname}"></p>
						</div>
					</div>
					<ul class="mui-table-view">
						<li th:each="com1:${com1}" class="mui-table-view-cell mui-media">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" style="max-width:30px;height: 30px "/>
								<div class="mui-media-body">
									<p class="mui-pull-right" th:text="${#dates.format(com1.createtime,'yyyy-MM-dd')}"></p>
									<p th:text="${#strings.substring(com1.custname,0,1)+'先生'}"></p>
									<!--<p style="color: red" th:text="'评分:'+${com.commstar}"></p>-->
									<p class="star_con star-vote">
										<span class="add-star" style="background-size: 75px"></span>
										<span class="del-star" style="background-size: 75px"></span>
										<span class="point" style="color: red;left:80px" th:text="${com1.commstar}+'.00'"></span>
									</p>
									<p style="color: black;font-size: 16px" th:text="${com1.commcontent}"></p>
									<p>
										<span class="mui-pull-right" style="font-size: 12px" th:text="${com1.servitemname}"></span> <span style="font-size: 12px;color: black" th:text="${com1.carfactname}+' '+${com1.carlinename}"></span>
									</p>
								</div>
							</div>
							<div class="weui-flex">
								<div class="weui-flex__item" style="margin-left: 11%">
									<img th:each="pic:${pic}" th:if="${com1.commid==pic.commid}" th:src="@{'/common/image?filename='+${pic.picurl}}" style="height: 50px;width: 50px;margin-right: 17px"/>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div id="tab3" class="weui-tab__bd-item">
					<div th:if="${#lists.size(com3)!=0}" class="weui-grids" style="padding: 0px" >
						<div th:each="com3:${com3}" class="weui-grid js_grid" style="border-bottom:none;padding: 5px;background-color: white">
							<p class="hhh" style="color: red;text-align: center;font-size: 16px" th:text="${#numbers.formatDecimal(com3.star, 0, 2)}"></p>
							<div class="star_con star-vote aaa" style="margin-left: 5px">
								<span class="add-star" style="background-size: 100px"></span>
								<span class="del-star bbb" style="background-size: 100px"></span>
							</div>
							<p style="color: red;text-align: center" th:text="${com3.itemname}"></p>
						</div>
					</div>
					<ul th:each="com2:${com2}" class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" style="max-width:30px;height: 30px "/>
								<div class="mui-media-body">
									<p class="mui-pull-right" th:text="${#dates.format(com2.createtime,'yyyy-MM-dd')}"></p>
									<p th:text="${#strings.substring(com2.custname,0,1)+'先生'}"></p>
									<!--<p style="color: red" th:text="'评分:'+${com.commstar}"></p>-->
									<p class="star_con star-vote">
										<span class="add-star" style="background-size: 75px"></span>
										<span class="del-star" style="background-size: 75px"></span>
										<span class="point" style="color: red;left:80px" th:text="${com2.commstar}+'.00'"></span>
									</p>
									<p style="color: black;font-size: 16px" th:text="${com2.commcontent}"></p>
									<p>
										<span class="mui-pull-right" style="font-size: 12px" th:text="${com2.servitemname}"></span> <span style="font-size: 12px;color: black" th:text="${com2.carfactname}+' '+${com2.carlinename}"></span>
									</p>
								</div>
							</div>
							<div class="weui-flex">
								<div class="weui-flex__item" style="margin-left: 11%">
									<img th:each="pic:${pic}" th:if="${com2.commid==pic.commid}" th:src="@{'/common/image?filename='+${pic.picurl}}" style="height: 50px;width: 50px;margin-right: 17px"/>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>


<script th:inline="javascript">
	/*<![CDATA[*/
//    window.onload=showStar(4.5);

    //n表示后台获取的星数
	$(".star_con").each(function () {
	    var points= $(this).find(".point").text();
        var con_wid=$(this).outerWidth();
        var del_move=(points*con_wid)/8;

        var bp=-del_move+"px 0px";
        var sl=del_move+"px";
        $(this).find(".del-star").css("background-position",bp);
        $(this).find(".del-star").css("left",sl);
    });
    $(".aaa").each(function () {
        var points= $(this).closest('.weui-grid').find(".hhh").text();
        var con_wid=$(this).outerWidth();
        var del_move=(points*con_wid)/6;

        var bp=-del_move+"px 0px";
        var sl=del_move+"px";
        $(this).find(".del-star").css("background-position",bp);
        $(this).find(".del-star").css("left",sl);
    });
//    function showStar(n){
//        var con_wid=document.getElementsByClassName("star_con").offsetWidth;
//        var del_star=document.getElementsByClassName("del_star");
//        console.log(con_wid);
//
//        //透明星星移动的像素
//        var del_move=(n*con_wid)/5;
//
//        del_star.style.backgroundPosition=-del_move+"px 0px";
//        del_star.style.left=del_move+"px";
//    }

	/*]]>*/
</script>

</body>

</html>